<template>
  <div style="margin-left:200px;margin-right:200px;">
    <div class="row" style="margin-top:50px;" >
      <div class="label">专业层次:</div>
      <div class="checkbox-group">
      <el-radio-group v-model="degreeLevel" @change="handleDegreeLevel" fill="#f34d41" size="small">
      <el-radio-button label="本科"></el-radio-button>
      <el-radio-button label="专科"></el-radio-button>
      </el-radio-group>
      </div>
    </div>
       <div class="row"  >
      <div class="label">专业门类:</div>
      <div class="checkbox-group">
      <el-radio-group v-model="majorType" @change="handleMajorType" fill="#f34d41" size="small">
       <el-radio-button label="全部"></el-radio-button>
       <el-radio-button v-for="type in types" :key="type" :label="type">{{ type }}</el-radio-button>
      </el-radio-group>
      </div>
    </div>
    <div class="row" style="margin-top:40px;">
      共:<span :v-model="this.total" style="color:red;margin-right:5px;margin-left:5px">{{this.total}}</span>条
  <el-input placeholder="输入专业名称" style="width: 55%; position: absolute;margin-left:11vh; margin-top: -9px;" v-model="name">
    <el-button slot="append" style="background: #ff6500; color: white" @click="handleQuery">搜索</el-button>
  </el-input>
    </div>
  <div v-for="(group, parent) in groupedSpecialsByParent" :key="parent">
     <el-row>
        <el-col :span="1"><div class="grid-content left-title "></div></el-col>
        <el-col :span="23"><div class="grid-content bg-purple-light">{{ parent }}</div></el-col>
        </el-row>

  <table style="width:900px">
      <tr v-for="(subGroup, category) in group" :key="category">
        <td style="width:200px;">{{ category }}</td>
        <td style="width:700px;">
          <ul class="specials-list">
            <template  v-for="(special, index) in subGroup">
              <el-button  type="text" style="margin-right:100px;color:#171717;" @click="handleSkip(special.id)"  :key="special.id">
                {{ special.name }}
              </el-button>
              <!-- 每行显示三个专业，超过三个则换行 -->
              <br v-if="(index + 1) % 3 === 0 && index !== subGroup.length - 1" :key="index">
            </template>
          </ul>
        </td>
      </tr>
  </table>
</div>
  </div>
</template>
<script>
import{getParentList,getMajorList}from'@/api/major'
const typeOptions = ['不限', '综合', '理工', '财经', '农林','医药','师范','体育','政法','艺术','民族','军事','语言','其他'];
export default {
  data() {
    return {
      specials: [],
      degreeLevel:'本科',
      majorType:'全部',
      types:typeOptions,
      name:'',//搜索框专业名称
      total:''
    };
  },
  methods:{
    //专业门类发生了变化  如哲学，教育学
    handleMajorType(){
    const params={"type":this.degreeLevel==='本科'?1:2,"parent":this.majorType==="全部"?null:this.majorType,"name":this.name}
    getMajorList(params).then(res=>{
      if(res.data.code===1){
        this.specials=res.data.data
        this.total=res.data.data.length
      }
    })
    },
   //专业层次发生了变化 如本科 专科
    handleDegreeLevel(){
      //获取大类的父类的列表
    const type=this.degreeLevel==='本科'?1:2
    getParentList({"type":type}).then(res=>{
      if(res.data.code===1){
        this.types=res.data.data
      }
    })
    //重新获取专业列表
    const params={"type":this.degreeLevel==='本科'?1:2,"parent":this.majorType==="全部"?null:this.majorType,"name":this.name}
    getMajorList(params).then(res=>{
      if(res.data.code===1){
        this.specials=res.data.data
        this.total=res.data.data.length
      }
    })
    },
    handleQuery(){
  const params={"type":this.degreeLevel==='本科'?1:2,"parent":this.majorType==="全部"?null:this.majorType,"name":this.name}
    getMajorList(params).then(res=>{
      if(res.data.code===1){
        this.specials=res.data.data
        this.total=res.data.data.length
      }
    })
    },
    //处理跳转到详情页
    handleSkip(id){
      this.$router.push({path:"majorDetail",query:{id:id}})
    }


  }
  ,
  computed: {
    groupedSpecialsByParent() {
      const groupedByParent = {};
      this.specials.forEach(special => {
        if (!groupedByParent[special.parent]) {
          groupedByParent[special.parent] = {};
        }
        if (!groupedByParent[special.parent][special.category]) {
          groupedByParent[special.parent][special.category] = [];
        }
        groupedByParent[special.parent][special.category].push(special);
      });
      return groupedByParent;
    }
  },
  created(){
    const type=this.degreeLevel==='本科'?1:2
    getParentList({"type":type}).then(res=>{
      if(res.data.code===1){
        this.types=res.data.data
      }
    })
  }
  ,
  mounted() {
   // const params={"type":degreeLevel==='本科'?1:2,"parent":this.parent,"name":this.name}
    const params={"type":this.degreeLevel==='本科'?1:2,"parent":this.majorType==="全部"?null:this.majorType,"name":this.name}
    getMajorList(params).then(res=>{
      if(res.data.code===1){
        this.specials=res.data.data
        this.total=res.data.data.length
      }
    })
/*     this.specials = [
      {
        boy_rate: "17",
        degree: "教育学学士",
        fivesalaryavg: 9900,
        girl_rate: "83",
        limit_year: "四年",
        parent: "教育学",
        category: "教育学类",
        name: "教育学"
      },
      {
        boy_rate: "26",
        degree: "教育学学士",
        fivesalaryavg: 9100,
        girl_rate: "74",
        limit_year: "四年",
        parent: "哲学",
        category: "哲学类",
        name: "aaa"
      },
      {
          boy_rate: "26",
          degree: "教育学学士",
          fivesalaryavg: 9100,
          girl_rate: "74",
          limit_year: "四年",
          parent: "哲学",
          category: "哲学类",
          name: "哲学"
        },
      {
        boy_rate: "26",
        degree: "教育学学士",
        fivesalaryavg: 9100,
        girl_rate: "74",
        limit_year: "四年",
        parent: "教育学",
        category: "教育学类",
        name: "科学教育"
      }
    ]; */
  }
};
</script>
<style scoped>


  .row {
  position: relative;
  display: flex;
  width: 110%;
  margin-bottom: 20px;
}

.label {
  position: absolute;

  margin-top:5px;
  font-size: 14px;
  z-index: 1;
}


.checkbox-group {
  margin-left: 90px;
  position: relative; /* 添加此行 */
  z-index: 0; /* 添加此行 */
}



.left-title {
background: red;
width: 3px;
  }
  .bg-purple-light {

    margin-left: -35px;
    font-size: 20px;
     font-weight: bold;

  }
  .grid-content {
    height: 20px;
  }


</style>